<template>
	<view :style="skin" class="u-page flex flex-direction">
		<zx-nav title="确认订单" bg="#fff" fixedTop></zx-nav>
		<view class="main flex-sub">
			<view class="card addr-card flex justify-between align-center" @tap="navTo">
				<image class="icon" v-if="addressData && Object.keys(addressData).length > 0" :src="`${assetsPath}/addr.png`" mode="widthFix"></image>
				<image class="icon" v-else :src="`${assetsPath}/addaddr.png`" mode="widthFix"></image>
				<view class="flex-sub" style="min-width: 0">
					<view v-if="addressData && Object.keys(addressData).length == 0">请添加收货地址</view>
					<view v-else>
						<view class="flex align-center">
							<text class="name">{{ addressData.contact_name }}</text>
							<text class="phone ml10">{{ addressData.contact_phone }}</text>
						</view>
						<view class="address">{{ addressData.province }}{{ addressData.city }}{{ addressData.district }}{{ addressData.address }}</view>
					</view>
				</view>
				<image class="arrow" :src="`${assetsPath}/right.png`" mode="widthFix"></image>
			</view>
			<view class="card bg-white">
				<view class="group-row flex align-center justify-between">
					<view class="title flex-sub" style="font-size: 28rpx; font-weight: 500">
						运输费
						<text class="u-primary ml12">估重：{{ orderinfo.goods_weight || 0 }}kg</text>
					</view>
					<view @click="moreTransportway" class="more flex align-center">
						<text>更多信息</text>
						<image class="arrow" :src="`${assetsPath}/right.png`" mode="widthFix"></image>
					</view>
				</view>
				<view class="transportwaylist flex flex-wrap justify-between">
					<view
						class="item tuijian"
						@tap="confrimfastmailway(tuijiantransportway)"
						v-if="tuijiantransportway && Object.keys(tuijiantransportway).length > 0"
						:class="[{ active: temtransportway.id == tuijiantransportway.id }]"
					>
						<view class="name text-cut">{{ tuijiantransportway.name }}</view>
						<view>约{{ tuijiantransportway.transport_amount }}</view>
					</view>
					<template v-if="transportList && transportList.length > 0">
						<view
							class="item"
							@tap="confrimfastmailway(item)"
							:class="[{ active: temtransportway.id == item.id }]"
							v-for="(item, index) in transportList.slice(0, 7)"
							:key="index"
						>
							<view class="name text-cut">{{ item.name }}</view>
							<view>约{{ item.transport_amount }}</view>
						</view>
					</template>
					<i></i>
					<i></i>
					<i></i>
				</view>
				<view class="transportwayinfo">{{ temtransportway.time || '' }}</view>
				<rich-text :nodes="temtransportway.info || ''"></rich-text>
			</view>
			<view class="card bg-white">
				<view class="group-row flex align-center">
					<view class="title">留言：</view>
					<input v-model="remark" type="text" placeholder="填写内容需要与客服协商并确认" class="flex-sub" />
				</view>
			</view>

			<view class="card bg-white">
				<view class="group-row flex align-center justify-between">
					<view class="title">优惠券</view>
					<view class="picker flex-sub text-right" @tap="showCoupons = true">
						<text v-if="couponsid.length == 0">{{ couponlist.length > 0 ? '可使用优惠券' : '无可用优惠券' }}</text>
						<text style="font-weight: bold" class="u-primary" v-if="couponsid.length > 0">
							{{ '使用了' + couponsid.length + '张优惠券，优惠了' + orderinfo.coupon_amount + '元' }}
						</text>
						<text class="cuIcon-right" v-if="couponlist.length > 0"></text>
					</view>
				</view>
				<view class="group-row flex align-center justify-between">
					<view class="title">满减</view>
					<text class="u-primary">-￥{{ orderinfo.deduction_amount || 0 }}</text>
				</view>
			</view>
			<view class="card bg-white">
				<view class="group-row flex align-center justify-between">
					<view class="title">商品金额：</view>
					<text class="u-primary">￥{{ orderinfo.goods_amount || 0 }}</text>
				</view>
				<view class="group-row">
					<view class="flex align-center justify-between">
						<view class="title">包装费</view>
						<text class="u-primary">￥{{ orderinfo.pack_amount || 0 }}</text>
					</view>
					<!-- <view class="tag">不满10公斤收取8元包装费，满10公斤免费</view> -->
				</view>
				<view class="group-row" v-if="orderinfo.baowen_amount > 0">
					<view class="flex align-center justify-between">
						<view class="title">保温费</view>
						<text class="u-primary">￥{{ orderinfo.baowen_amount || 0 }}</text>
					</view>
					<view class="tag">花花北上需御寒保暖</view>
				</view>
				<view class="group-row">
					<view class="flex align-center justify-between">
						<view class="title flex" style="width: 20em">
							<text>运输费</text>
							<navigator url="/pages/article/details?id=3" class="flex t-grey ml20 align-center" hover-class="none">
								<text>查看说明</text>
								<u-icon name="arrow-right" size="28"></u-icon>
							</navigator>
						</view>
						<text class="u-primary">￥{{ orderinfo.transport_amount || 0 }}</text>
					</view>
					<view class="tag">运输费为预收，发完货多退少补</view>
				</view>
				<view class="group-row">
					<view class="flex align-center justify-between">
						<view class="title">订单总额</view>
						<text class="u-primary">￥{{ orderinfo.order_amount || 0 }}</text>
					</view>
				</view>
			</view>

			<u-gap height="20"></u-gap>
		</view>
		<view class="card bg-white" style="padding-bottom: 0">
			<mycheckbox class="checkbox" :state="isRead" @handChange="isRead = !isRead">
				<text class="ml24">我已阅读并同意</text>
				<navigator @tap.stop="" url="/pages/article/details?id=1">《{{ appName }}平台交易规则》</navigator>
			</mycheckbox>
		</view>
		<view class="carbar u-bg-white flex justify-between align-center">
			<view class="flex-sub text-right">
				合计：
				<span class="price">
					<text class="unit">￥</text>
					<text>{{ orderinfo.need_amount || 0 }}</text>
				</span>
			</view>
			<u-button @click="toOrder" :disabled="!isRead" type="success" shape="circle" :loading="btnLoading" text="提交订单"></u-button>
		</view>
		<!-- 优惠券列表 -->
		<u-popup :show="showCoupons && couponlist.length > 0" @close="showCoupons = false" :closeable="true">
			<view class="couponsbox">
				<view class="title">请选择优惠券</view>
				<view class="list"><coupon :info="item" v-for="(item, index) in couponlist" :key="index" :type="3" @confrim="confrimCoupon"></coupon></view>
			</view>
		</u-popup>
		<!-- 提示切换城市 -->
		<u-popup mode="center" :show="showLocation">
			<view class="cu-dialog location-modal">
				<view class="title">收货地址与当前城市不符，当前城市为“{{ currentLocation }}”</view>
				<view class="close" @tap="showLocation = false"><text class="cuIcon-close"></text></view>
				<view class="btnbar flex justify-between">
					<navigator url="/pages/selectCity/selectCity" class="btn">切换城市</navigator>
					<navigator url="/pages/address/address?type=1" class="btn active">切换收货地址</navigator>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import mycheckbox from '@/components/mycheckbox';
import coupon from '@/components/coupon';
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
	data() {
		return {
			couponsid: [],
			addressData: {},
			orderinfo: {},
			transportList: [],
			tuijiantransportway: {},
			transport: 0,
			coupon_id: 0,
			btnLoading: false,
			temtransportway: {},
			transportway: undefined, //运输方式
			isRead: false, //是否同意交易规则
			param: {},
			remark: undefined,
			goods_amount: 0,
			showCoupons: false,
			couponlist: [],
			showLocation: false, //显示切换地址
			isInit: false
		};
	},
	components: { mycheckbox, coupon },
	computed: {
		...mapState(['currentLocation'])
	},
	onLoad(options) {
		this.goodsList = options.ids;
		this.getDefaultAddr();
	},
	onShow() {
		this.showLocation = false;
		if (this.isInit) {
			this.calcOrder();
		}
	},
	methods: {
		getDefaultAddr() {
			this.$postAction(this.$api.getDefaultAddr).then(da => {
				if (da.code == 0) {
					this.addressData = da.data;
				}
				this.calcOrder();
			});
		},
		calcOrder() {
			let { contact_name, contact_phone, province, city, district, address } = this.addressData;
			let param = {
				contact_name,
				contact_phone,
				province,
				city,
				district,
				address,
				is_deduction_amount: 1 //是否开启满减
			};
			if (this.goodsList) {
				param.goodsList = this.goodsList;
			}
			param.transport = this.transportway || 0;
			if (this.couponsid) {
				param.coupon_id = this.couponsid.join(',');
			}
			/* 判断选择地址的省市，是否和定位相同 */
			if (city && city != this.currentLocation) {
				this.showLocation = true;
				return false;
			}
			this.param = { ...param };
			this.$postAction(this.$api.calcOrder, param, {
				custom: {
					loading: false
				}
			})
				.then(da => {
					if (da.code == 0) {
						this.orderinfo = da.data;
						if (this.goods_amount != this.orderinfo.goods_amount) {
							/* 商品价格变动，重新获取优惠券 */
							this.goods_amount = this.orderinfo.goods_amount;
							this.getCouponlist(this.orderinfo.goods_amount);
						}
						let transportList = this.orderinfo.transport && this.orderinfo.transport.show;
						if (transportList && transportList.length > 0 && this.orderinfo.transport.tuijian) {
							transportList = transportList.filter(item => item.id != this.orderinfo.transport.tuijian.id);
						}
						this.transportList = [...transportList];
						if (this.transportList && this.transportList.length > 0 && param.transport) {
							let index = this.transportList.findIndex(item => item.id == this.transportway);
							if (index > -1) {
								this.temtransportway = { ...this.transportList[index] };
							} else {
								this.temtransportway = { ...this.orderinfo.transport.tuijian };
								console.log('this.transportway', this.transportway);
								if (param.transport != this.temtransportway.id) {
									//如果没有推荐物流，则第一次显示价格的时候，多加一次物流价格
									this.orderinfo.need_amount += this.temtransportway.transport_amount;
									this.orderinfo.transport_amount = this.temtransportway.transport_amount;
									this.orderinfo.order_amount += this.temtransportway.transport_amount;
								}
							}
						} else {
							this.temtransportway = { ...this.orderinfo.transport.tuijian };
							//如果没有推荐物流，则第一次显示价格的时候，多加一次物流价格
							if (!param.transport) {
								this.orderinfo.need_amount += this.temtransportway.transport_amount;
								this.orderinfo.transport_amount = this.temtransportway.transport_amount;
								this.orderinfo.order_amount += this.temtransportway.transport_amount;
							}
						}
						this.orderinfo.need_amount = Math.round(this.orderinfo.need_amount * 100) / 100;
						this.orderinfo.order_amount = Math.round(this.orderinfo.order_amount * 100) / 100;
						this.transportway = this.temtransportway.id;
						this.tuijiantransportway = this.orderinfo.transport && this.orderinfo.transport.tuijian;
					}
				})
				.finally(() => {
					this.isInit = true;
				});
		},
		/* 确认运输方式 */
		confrimfastmailway(transportway) {
			if (this.transportway != transportway.id) {
				this.temtransportway = transportway;
				this.transportway = this.temtransportway.id;
				this.calcOrder();
			}
		},
		toOrder() {
			let { contact_name, contact_phone, province, city, district, address } = this.addressData;
			let param = {
				contact_name,
				contact_phone,
				province,
				city,
				district,
				address,
				is_deduction_amount: 1 //是否开启满减
			};
			if (this.goodsList) {
				param.goodsList = this.goodsList;
			}
			if (this.transportway) {
				param.transport = this.transportway;
			}
			if (this.couponsid) {
				param.coupon_id = this.couponsid.join(',');
			}
			if (Object.keys(this.addressData).length == 0) {
				uni.showToast({
					title: '请选择地址',
					icon: 'none'
				});
				return false;
			}
			this.$Router.push({
				path: '/pages/orderpay/pay',
				query: {
					...param,
					remark: this.remark || '',
					need_amount: this.orderinfo.need_amount,
					user_amount: this.orderinfo.user_amount
				}
			});
		},
		navTo() {
			this.$Router.push({
				path: '/pages/address/address',
				query: {
					type: 1
				}
			});
		},
		moreTransportway() {
			var param = {
				goodsList: this.goodsList,
				transport: this.transportway,
				coupon_id: this.couponsid.join(','),
				province: this.addressData && this.addressData.province,
				address: this.addressData && this.addressData.address,
				district: this.addressData && this.addressData.district,
				city: this.addressData && this.addressData.city
			};
			console.log('param', param);
			this.$Router.push({
				path: '/pages/transportway/transportway',
				query: param
			});
		},
		getCouponlist(price) {
			let param = {
				page: 1,
				limit: 99,
				goods_amount: price
			};
			let $me = this;
			this.$postAction(this.$api.getMyCouponList, param).then(da => {
				this.couponsid = [];
				this.couponlist = [];
				if (da.data && da.data.length > 0) {
					let curPageData = da.data.map(item => item);
					this.couponlist = curPageData;
				}
			});
		},
		confrimCoupon(info) {
			console.log('info', info);
			this.couponsid = [info.id];
			this.calcOrder();
			this.showCoupons = false;
		}
	}
};
</script>

<style scoped lang="scss">
@import '@/common/location.scss';
.main {
	overflow: auto;
}
.carbar {
	padding: 20upx 28upx 20upx 56upx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom) / 2);
	z-index: 999;
	.price {
		color: var(--nav-bg);
		font-weight: 500;
		font-size: 32upx;
		margin-right: 24upx;
		.unit {
			font-size: 22upx;
		}
	}
}

::v-deep .u-button--normal {
	height: 77upx !important;
	width: 200upx !important;
}
.card {
	border-radius: 12upx;
	background: #fff;
	padding: 35upx 32upx;
	margin-top: 24upx;
	.arrow {
		display: block;
		width: 28upx;
		height: 28upx;
	}
	.checkbox {
		font-size: 24upx;
		navigator {
			color: var(--nav-bg);
		}
	}
}
.addr-card {
	min-height: 150upx;
	color: #000;
	font-weight: 500;
	background: #fff url(/static/maps_bg.png) no-repeat center bottom;
	background-size: 100% auto;
	.icon {
		display: block;
		width: 54upx;
		height: 54upx;
		margin-right: 24upx;
	}
	.name {
		color: #000;
	}
	.phone {
		color: #636366;
		font-size: 24upx;
	}
	.address {
		color: #636366;
		font-size: 24upx;
		margin-top: 8upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
.group-row {
	& + .group-row {
		margin-top: 28upx;
	}
	.title {
		width: 5em;
		margin-right: 40upx;
		color: #1c1c1e;
		font-size: 26upx;
	}

	input {
		border-radius: 10upx;
		height: 50upx;
		line-height: 50upx;
		padding-left: 30upx;
		font-size: 26upx;
		text-align: right;
	}

	.picker {
		font-size: 26upx;
		color: #a4a4a4;

		text {
			vertical-align: middle;
		}
	}

	.text-gray {
		// font-size: 28upx;
		color: #a4a4a4;
	}

	.tag {
		padding-top: 8upx;
		color: #636366;
		font-size: 24upx;
	}
	.more {
		color: #8e8e93;
		font-size: 28upx;
	}
}

.transportwaylist {
	margin-top: 20upx;
	.item {
		background: #f4f4f4;
		border-radius: 8upx;
		padding: 16upx;
		width: 150upx;
		font-size: 22upx;
		position: relative;
		color: #48484a;
		margin-bottom: 10upx;

		.name {
			font-size: 26upx;
			margin-bottom: 12upx;
			color: #48484a;
		}

		&.active {
			color: var(--nav-bg);
			height: 110upx;
			background: #fff8f9;
			border: 2upx solid var(--nav-bg);
			.name {
				color: var(--nav-bg);
			}
		}

		&.tuijian {
			&::before {
				position: absolute;
				right: 0;
				top: -2rpx;
				height: 30upx;
				width: 30upx;
				content: '';
				background: url(/static/recommend.png) no-repeat center center;
				background-size: 100% auto;
			}
		}

		&.active {
			&::after {
				position: absolute;
				right: 0;
				bottom: -2rpx;
				height: 34upx;
				width: 34upx;
				content: '';
				background: url(/static/selected.png) no-repeat center center;
				background-size: 100% auto;
			}
		}
	}

	i {
		width: 150upx;
		display: block;
	}
}

.transportwayinfo {
	color: #fe5608;
	font-size: 26upx;
	line-height: 42upx;
}
.couponsbox {
	padding: 35upx 20upx;
	.title {
		font-size: 32upx;
		line-height: 45upx;
		font-weight: 600;
		color: #000;
		margin-bottom: 35upx;
	}
	.list {
		max-height: 60vh;
		overflow: auto;
	}
}
</style>
